<script>
export default {
  name: "search",
  data() {
    return {
      // 表单数据
      selectedRegion: ['江苏省', '苏州市', '虎丘区'], // 选中的地区
      selectedPosition: '岗位B', // 选中的岗位
      isGraduate: false, // 是否应届
      isPartyMember: false, // 是否党员
      hasGrassrootsWork: false, // 是否基层工作2年

      // 弹窗控制
      showRegion: false,
      showPosition: false,
      showYesNo: false,
      currentYesNoType: '', // 当前选择类型
      currentYesNoTitle: '', // 当前选择标题

      // 地区数据
      provinces: [
        { code: '000000', name: '总局' },
        { code: '320000', name: '江苏' },
        { code: '330000', name: '浙江' },
        { code: '310000', name: '上海' },
        { code: '110000', name: '北京' }
      ],
      cities: [
        { code: '000000', name: '省局', parent: '000000' },
        { code: '320500', name: '苏州市', parent: '320000' },
        { code: '320600', name: '南通市', parent: '320000' },
        { code: '320400', name: '常州市', parent: '320000' },
        { code: '320200', name: '无锡市', parent: '320000' },
        { code: '320700', name: '连云港市', parent: '320000' },
        { code: '330100', name: '杭州市', parent: '330000' },
        { code: '330200', name: '宁波市', parent: '330000' }
      ],
      districts: [
        { code: '000000', name: '市局', parent: '000000' },
        { code: '320505', name: '虎丘区', parent: '320500' },
        { code: '320506', name: '工业园区', parent: '320500' },
        { code: '320507', name: '高新区', parent: '320500' },
        { code: '320581', name: '昆山市', parent: '320500' }
      ],

      // 岗位数据
      positions: [
        { code: 'A', name: '岗位A' },
        { code: 'B', name: '岗位B' },
        { code: 'C', name: '岗位C' },
        { code: 'D', name: '岗位D' }
      ],

      // 选择状态
      selectedProvinces: ['320000'],
      selectedCities: ['320500'],
      selectedDistricts: ['320505'],
      tempSelectedProvinces: [],
      tempSelectedCities: [],
      tempSelectedDistricts: []
    }
  },
  mounted() {
    // 初始化地区显示
    this.updateSelectedRegion();
  },
  computed: {
    // 过滤后的城市列表
    filteredCities() {
      // 如果没有选择省份，返回空数组
      if (this.tempSelectedProvinces.length === 0) {
        return [];
      }
      // 如果选择了总局，显示所有城市
      if (this.tempSelectedProvinces.includes('000000')) {
        return this.cities;
      }
      // 否则只显示选中省份下的城市
      return this.cities.filter(city => 
        this.tempSelectedProvinces.includes(city.parent)
      );
    },
    // 过滤后的区县列表
    filteredDistricts() {
      // 如果没有选择城市，返回空数组
      if (this.tempSelectedCities.length === 0) {
        return [];
      }
      // 如果选择了省局，显示所有区县
      if (this.tempSelectedCities.includes('000000')) {
        return this.districts;
      }
      // 否则只显示选中城市下的区县
      return this.districts.filter(district => 
        this.tempSelectedCities.includes(district.parent)
      );
    }
  },
  methods: {
    // 显示地区选择弹窗
    showRegionPopup() {
      // 初始化临时选择状态
      this.tempSelectedProvinces = [...this.selectedProvinces];
      this.tempSelectedCities = [...this.selectedCities];
      this.tempSelectedDistricts = [...this.selectedDistricts];
      this.showRegion = true;
    },

    // 选择省份
    selectProvince(province) {
      const index = this.tempSelectedProvinces.indexOf(province.code);
      if (index > -1) {
        this.tempSelectedProvinces.splice(index, 1);
      } else {
        if (this.tempSelectedProvinces.length >= 3) {
          uni.showToast({
            title: '每层最多选择3个',
            icon: 'none'
          });
          return;
        }
        this.tempSelectedProvinces.push(province.code);
      }
      // 清除下级选择，实现联动效果
      this.tempSelectedCities = [];
      this.tempSelectedDistricts = [];
    },

    // 选择城市
    selectCity(city) {
      const index = this.tempSelectedCities.indexOf(city.code);
      if (index > -1) {
        this.tempSelectedCities.splice(index, 1);
      } else {
        if (this.tempSelectedCities.length >= 3) {
          uni.showToast({
            title: '每层最多选择3个',
            icon: 'none'
          });
          return;
        }
        this.tempSelectedCities.push(city.code);
      }
      // 清除下级选择，实现联动效果
      this.tempSelectedDistricts = [];
    },

    // 选择区县
    selectDistrict(district) {
      const index = this.tempSelectedDistricts.indexOf(district.code);
      if (index > -1) {
        this.tempSelectedDistricts.splice(index, 1);
      } else {
        if (this.tempSelectedDistricts.length >= 3) {
          uni.showToast({
            title: '每层最多选择3个',
            icon: 'none'
          });
          return;
        }
        this.tempSelectedDistricts.push(district.code);
      }
    },

    // 确认地区选择
    confirmRegion() {
      this.selectedProvinces = [...this.tempSelectedProvinces];
      this.selectedCities = [...this.tempSelectedCities];
      this.selectedDistricts = [...this.tempSelectedDistricts];
      this.updateSelectedRegion();
      this.showRegion = false;
    },

    // 取消地区选择
    cancelRegion() {
      this.showRegion = false;
    },

    // 更新选中的地区显示
    updateSelectedRegion() {
      this.selectedRegion = [];
      
      // 添加省份（包括总局）
      this.selectedProvinces.forEach(provinceCode => {
        const province = this.provinces.find(p => p.code === provinceCode);
        if (province) {
          this.selectedRegion.push(province.name);
        }
      });
      
      // 添加城市（包括省局）
      this.selectedCities.forEach(cityCode => {
        const city = this.cities.find(c => c.code === cityCode);
        if (city) {
          this.selectedRegion.push(city.name);
        }
      });
      
      // 添加区县（包括市局）
      this.selectedDistricts.forEach(districtCode => {
        const district = this.districts.find(d => d.code === districtCode);
        if (district) {
          this.selectedRegion.push(district.name);
        }
      });
    },

    // 获取地区显示文本
    getRegionText() {
      return this.selectedRegion.join(' ');
    },

    // 显示岗位选择弹窗
    showPositionPopup() {
      this.showPosition = true;
    },

    // 选择岗位
    selectPosition(position) {
      this.selectedPosition = position.name;
      this.showPosition = false;
    },

    // 显示是否选择弹窗
    showYesNoPopup(type, title) {
      this.currentYesNoType = type;
      this.currentYesNoTitle = title;
      this.showYesNo = true;
    },

    // 显示应届选择弹窗
    showGraduatePopup() {
      this.showYesNoPopup('graduate', '是否应届');
    },

    // 显示党员选择弹窗
    showPartyPopup() {
      this.showYesNoPopup('party', '是否党员');
    },

    // 显示基层工作选择弹窗
    showGrassrootsPopup() {
      this.showYesNoPopup('grassroots', '是否基层工作2年');
    },

    // 选择是或否
    selectYesNo(value) {
      switch (this.currentYesNoType) {
        case 'graduate':
          this.isGraduate = value;
          break;
        case 'party':
          this.isPartyMember = value;
          break;
        case 'grassroots':
          this.hasGrassrootsWork = value;
          break;
      }
      this.showYesNo = false;
    },

    // 查询往年
    queryPreviousYears() {
      this.submitForm('previous');
    },

    // 查询当年
    queryCurrentYear() {
      this.submitForm('current');
    },

    // 提交表单
    submitForm(type) {
      // 验证表单
      if (this.selectedRegion.length === 0) {
        uni.showToast({
          title: '请选择地区',
          icon: 'none'
        });
        return;
      }

      if (!this.selectedPosition) {
        uni.showToast({
          title: '请选择岗位',
          icon: 'none'
        });
        return;
      }

      if (this.isGraduate === null) {
        uni.showToast({
          title: '请选择是否应届',
          icon: 'none'
        });
        return;
      }

      if (this.isPartyMember === null) {
        uni.showToast({
          title: '请选择是否党员',
          icon: 'none'
        });
        return;
      }

      if (this.hasGrassrootsWork === null) {
        uni.showToast({
          title: '请选择是否基层工作2年',
          icon: 'none'
        });
        return;
      }

      const formData = {
        regions: this.selectedRegion,
        position: this.selectedPosition,
        isGraduate: this.isGraduate,
        isPartyMember: this.isPartyMember,
        hasGrassrootsWork: this.hasGrassrootsWork,
        queryType: type,
        selectedProvinces: this.selectedProvinces,
        selectedCities: this.selectedCities,
        selectedDistricts: this.selectedDistricts
      };

      console.log('提交表单数据:', formData);

      // 跳转到结果页面
      this.$goPage({
        url: '/pages/job/result',
        params: formData,
        needLogin: true
      });
    }
  }
}
</script>

<template>
  <view class="search-page">
    <!-- 表单卡片 -->
    <view class="form-card">
      <!-- 报名岗位所在地区 -->
      <view class="form-item" @click="showRegionPopup">
        <text class="form-label">报名岗位所在地区</text>
        <view class="form-value">
          <text class="value-text" v-if="selectedRegion.length > 0">{{ getRegionText() }}</text>
          <text class="placeholder-text" v-else>请选择地区</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 报名岗位 -->
      <view class="form-item" @click="showPositionPopup">
        <text class="form-label">报名岗位</text>
        <view class="form-value">
          <text class="value-text" v-if="selectedPosition">{{ selectedPosition }}</text>
          <text class="placeholder-text" v-else>请选择岗位</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 提示文字 -->
      <view class="form-hint">
        <text class="hint-text">非财经岗请咨询后再报名</text>
      </view>

      <!-- 是否应届 -->
      <view class="form-item" @click="showGraduatePopup">
        <text class="form-label">是否应届</text>
        <view class="form-value">
          <text class="value-text" v-if="isGraduate !== null">{{ isGraduate ? '是' : '否' }}</text>
          <text class="placeholder-text" v-else>请选择</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 是否党员 -->
      <view class="form-item" @click="showPartyPopup">
        <text class="form-label">是否党员</text>
        <view class="form-value">
          <text class="value-text" v-if="isPartyMember !== null">{{ isPartyMember ? '是' : '否' }}</text>
          <text class="placeholder-text" v-else>请选择</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 是否基层工作2年 -->
      <view class="form-item" @click="showGrassrootsPopup">
        <text class="form-label">是否基层工作2年</text>
        <view class="form-value">
          <text class="value-text" v-if="hasGrassrootsWork !== null">{{ hasGrassrootsWork ? '是' : '否' }}</text>
          <text class="placeholder-text" v-else>请选择</text>
          <image src="/static/image/icon_arrow_right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="btn btn-secondary" @click="queryPreviousYears">
        <text class="btn-text">查询往年</text>
      </view>
      <view class="btn btn-primary" @click="queryCurrentYear">
        <text class="btn-text">查询当年</text>
      </view>
    </view>

    <!-- 地区选择弹窗 -->
    <u-popup v-model="showRegion" mode="bottom" border-radius="16" height="70%">
      <view class="region-popup">
        <view class="popup-header">
          <text class="popup-title">选择地区</text>
        </view>
        
        <view class="region-columns">
          <!-- 第一级 -->
          <view class="region-column">
            <scroll-view class="column-list" scroll-y="true">
              <view 
                v-for="(province, index) in provinces" 
                :key="index"
                class="region-item"
                :class="{ 'selected': tempSelectedProvinces.includes(province.code) }"
                @click="selectProvince(province)"
              >
                <text class="item-text">{{ province.name }}</text>
                <image 
                  v-if="tempSelectedProvinces.includes(province.code)"
                  src="/static/image/icon_like_active.png" 
                  class="check-icon" 
                  mode="aspectFit"
                ></image>
              </view>
            </scroll-view>
          </view>

          <!-- 第二级 -->
          <view class="region-column">
            <scroll-view class="column-list" scroll-y="true">
              <view 
                v-for="(city, index) in filteredCities" 
                :key="index"
                class="region-item"
                :class="{ 'selected': tempSelectedCities.includes(city.code) }"
                @click="selectCity(city)"
              >
                <text class="item-text">{{ city.name }}</text>
                <image 
                  v-if="tempSelectedCities.includes(city.code)"
                  src="/static/image/icon_like_active.png" 
                  class="check-icon" 
                  mode="aspectFit"
                ></image>
              </view>
            </scroll-view>
          </view>

          <!-- 第三级 -->
          <view class="region-column">
            <scroll-view class="column-list" scroll-y="true">
              <view 
                v-for="(district, index) in filteredDistricts" 
                :key="index"
                class="region-item"
                :class="{ 'selected': tempSelectedDistricts.includes(district.code) }"
                @click="selectDistrict(district)"
              >
                <text class="item-text">{{ district.name }}</text>
                <image 
                  v-if="tempSelectedDistricts.includes(district.code)"
                  src="/static/image/icon_like_active.png" 
                  class="check-icon" 
                  mode="aspectFit"
                ></image>
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="popup-footer">
          <view class="footer-btn cancel-btn" @click="cancelRegion">
            <text class="footer-btn-text">取消</text>
          </view>
          <view class="footer-btn confirm-btn" @click="confirmRegion">
            <text class="footer-btn-text">确定</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 岗位选择弹窗 -->
    <u-popup v-model="showPosition" mode="bottom" border-radius="16" height="40%">
      <view class="position-popup">
        <view class="popup-header">
          <text class="popup-title">选择岗位</text>
        </view>
        <scroll-view class="position-list" scroll-y="true">
          <view 
            v-for="(position, index) in positions" 
            :key="index"
            class="position-item"
            @click="selectPosition(position)"
          >
            <text class="position-text">{{ position.name }}</text>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <!-- 是否选择弹窗 -->
    <u-popup v-model="showYesNo" mode="bottom" border-radius="16" height="30%">
      <view class="yesno-popup">
        <view class="popup-header">
          <text class="popup-title">{{ currentYesNoTitle }}</text>
        </view>
        <view class="yesno-list">
          <view class="yesno-item" @click="selectYesNo(true)">
            <text class="yesno-text">是</text>
          </view>
          <view class="yesno-item" @click="selectYesNo(false)">
            <text class="yesno-text">否</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style scoped lang="scss">
.search-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 32rpx 24rpx;
}

.form-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 32rpx;

  .form-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    display: block;
  }

  .form-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 24rpx 20rpx;
    min-height: 80rpx;

    .value-text {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }

    .placeholder-text {
      font-size: 28rpx;
      color: #999;
      flex: 1;
    }

    .arrow-icon {
      width: 24rpx;
      height: 24rpx;
      flex-shrink: 0;
    }
  }
}

.form-hint {
  margin-bottom: 32rpx;

  .hint-text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.4;
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.btn {
  height: 88rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.btn-secondary {
    background-color: #333;
  }

  &.btn-primary {
    background-color: #539DF3;
  }

  .btn-text {
    font-size: 32rpx;
    color: #fff;
  }
}

// 地区选择弹窗
.region-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.popup-header {
  padding: 32rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;

  .popup-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
  }
}

.region-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.region-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1rpx solid #f0f0f0;

  &:last-child {
    border-right: none;
  }
}

.column-header {
  padding: 24rpx 16rpx;
  background-color: #f8f8f8;
  border-bottom: 1rpx solid #f0f0f0;

  .header-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }
}

.column-list {
  flex: 1;
  padding: 0 16rpx;
  
  // 空状态样式
  &:empty::after {
    content: '请先选择上级';
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.region-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
  border-radius: 8rpx;
  margin: 4rpx 0;
  &.selected {
    background-color: #539DF3;
    margin: 8rpx 0;

    .item-text {
      color: #fff;
    }
  }

  &:not(.selected):hover {
    background-color: #f5f5f5;
  }

  .item-text {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }

  .check-icon {
    width: 24rpx;
    height: 24rpx;
    flex-shrink: 0;
  }
}

.popup-footer {
  display: flex;
  padding: 24rpx 32rpx 62rpx 32rpx;
  gap: 24rpx;
  border-top: 1rpx solid #f0f0f0;
  background-color: #fff;
}

.footer-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.cancel-btn {
    background-color: #f5f5f5;
  }

  &.confirm-btn {
    color: #fff;
    background-color: #539DF3;
  }

  .footer-btn-text {
    font-size: 28rpx;
    font-weight: 500;

    .cancel-btn & {
      color: #666;
    }

    .confirm-btn & {
      color: #fff;
    }
  }

  &:active {
    transform: scale(0.98);
  }
}

// 岗位选择弹窗
.position-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.position-list {
  flex: 1;
  padding: 0 32rpx;
}

.position-item {
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .position-text {
    font-size: 30rpx;
    color: #333;
  }
}

// 是否选择弹窗
.yesno-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.yesno-list {
  flex: 1;
  padding: 0 32rpx;
}

.yesno-item {
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .yesno-text {
    font-size: 30rpx;
    color: #333;
  }
}
</style>
